<template>
  <app-page card full>
    <app-page-main>
      <template #header>
        <div class="app-query">
          <el-form
            :inline="true"
            :model="pageData.query"
            @submit.prevent="pageActions.handleSearch"
            @keyup.enter="pageActions.handleSearch"
          >
            <el-form-item label="关键字">
              <el-input v-model="pageData.query.keyword" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="位置">
              <el-select v-model="pageData.query.slot" placeholder="请选择" clearable>
                <el-option
                  v-for="(item, index) in dict.bannerSlot"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="pageData.query.isOpen" placeholder="请选择" clearable>
                <el-option
                  v-for="(item, index) in [
                    { label: '全部', value: '' },
                    { label: '上线', value: 'true' },
                    { label: '下线', value: 'false' },
                  ]"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="search" @click="pageActions.handleSearch">搜索</el-button>
              <el-button icon="refresh" @click="pageActions.handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="app-action">
          <el-button type="primary" plain icon="plus" @click="pageActions.handleAdd()">添加</el-button>
        </div>
      </template>

      <el-table v-loading="pageData.loading" :data="pageData.data">
        <el-table-column prop="rank" label="序号" width="80px"></el-table-column>
        <el-table-column label="内容">
          <template #default="scope">
            <div class="banner">
              <div class="cover">
                <el-image
                  v-for="(url, key) in [scope.row.cover]"
                  :key="key"
                  class="image-item"
                  style="width: 120px; height: 65px"
                  fit="cover"
                  :src="url"
                  :preview-src-list="[scope.row.cover]"
                  preview-teleported
                />
              </div>
              <div class="title">{{ scope.row.title }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="slotDesc" label="位置"></el-table-column>
        <!-- <el-table-column prop="slotDesc" label="位置"></el-table-column> -->
        <el-table-column label="状态">
          <template #default="{ row }">
            <el-switch
              :before-change="
                () =>
                  pageActions.handleUpdate(
                    row,
                    { isOpen: !row.isOpen },
                    !row.isOpen ? '确认上线？' : '确认下线？',
                    '已修改'
                  )
              "
              v-model="row.isOpen"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间"></el-table-column>
        <el-table-column label="操作" fixed="right" width="200px">
          <template #default="{ row }">
            <el-button link type="primary" icon="edit" @click="pageActions.handleEdit(row)"> 编辑 </el-button>
            <el-button link type="primary" icon="delete" @click="pageActions.handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </app-page-main>

    <template #footer>
      <div class="app-toolbar"></div>
      <el-pagination
        v-if="pageData.total > pageData.pageSize"
        @size-change="pageActions.handleSizeChange"
        @current-change="pageActions.handlePageChange"
        :current-page="pageData.page"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      />
    </template>

    <!-- 新增/编辑 -->
    <jax-dialog-edit
      type="drawer"
      size="512px"
      v-model="pageData.detail"
      v-model:show="pageData.shwoEdit"
      :json="json"
      @submit="pageActions.handleSubmit()"
    />
  </app-page>
</template>

<script setup>
import { usePageList, useAppStore } from 'jax-node'

const { dict } = useAppStore()
const { pageData, pageActions } = usePageList()

const json = computed(() => {
  const required = true
  const miniInput = { style: 'width:100px' }

  return [
    { name: 'rank', label: '序号', type: 'number', tips: '（序号越小越靠前）', inputAttr: miniInput },
    { name: 'title', label: '内容标题', required },
    // { name: 'isOpen', label: '内容状态', type: 'switch' },
    { name: 'slot', label: '位置', type: 'select', required, options: dict.bannerSlot },
    // {
    //   name: 'slotType',
    //   label: '位置',
    //   type: 'select',
    //   required,
    //   options: [
    //     { label: '首页Banner', value: 0 },
    //     { label: '推荐位', value: 1 },
    //   ],
    //   inputAttr: { style: 'width:100%' },
    // },
    {
      name: 'cover',
      label: '封面图',
      type: 'upload-image',
      required,
      inputAttr: { tips: '图片建议分辨率（750 x 520）' },
    },
    {
      name: 'module',
      label: '内容类型',
      type: 'radioGroup',
      options: [
        { label: '无', value: '' },
        { label: '图片', value: 'image' },
        { label: '文本', value: 'text' },
        { label: '跳转', value: 'path' },
      ],
    },
    ...(() => {
      const json = []
      const { module } = pageData.detail

      if (module == 'image') {
        json.push({
          name: 'images',
          label: '图片',
          type: 'upload-images',
          inputAttr: { tips: '图片建议分辨率（750 x 高度任意）' },
          required,
        })
      } else if (module == 'text') {
        json.push({
          name: 'content',
          label: '内容',
          required,
          type: 'textarea',
          inputAttr: {
            maxlength: undefined,
          },
        })
      } else if (module == 'path') {
        json.push({
          name: 'path',
          label: '跳转路径',
          required,
          inputAttr: { maxlength: undefined },
        })
      }

      return json
    })(),
  ]
})
</script>

<style lang="scss">
.banner {
  display: flex;
  align-items: center;
  overflow: hidden;
  .cover {
    margin-right: 12px;
    border: 1px solid #fafafa;
    height: 50px;
    background-color: #f4f6f9;
  }
}
</style>
